import { defineComponent } from 'vue'
import {
  NButton,
  NDataTable,
  NIcon,
  NInput,
  NPagination,
  NSpace
} from 'naive-ui'
import { SearchOutlined } from '@vicons/antd'
import Card from '@/components/card'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import DropTableModal from '@/views/data-manage/dialog/data-catalog/drop-table-modal'
import ModTableOwnerModal from '@/views/data-manage/dialog/data-catalog/mod-table-owner-modal'
import ModTableRemarkModal from '@/views/data-manage/dialog/data-catalog/mod-table-remark-modal'
import { useRouter } from 'vue-router'

const TableListTab = defineComponent({
  name: 'TableListTab',
  props: {
    dsType: {
      type: String,
      required: true
    },
    datasourceId: {
      type: Number,
      required: true
    },
    dsName: {
      type: String,
      required: true
    },
    dbName: {
      type: String,
      required: true
    },
    databaseId: {
      type: Number,
      required: true
    }
  },
  setup() {
    const { state, updateList, changePage, changePageSize, onOperationClick } =
      useTable()
    const { columnsRef } = useColumns(onOperationClick)
    const router = useRouter()

    return {
      state,
      columnsRef,
      onUpdatedList: updateList,
      changePage,
      changePageSize,
      router
    }
  },
  mounted() {
    this.state.searchParam.datasourceId = this.datasourceId
    this.state.searchParam.dbName = this.dbName
    this.onUpdatedList()
  },
  methods: {
    handleModTableRemarkModalShowChange() {
      this.state.modTableRemarkModalShow = false
    },
    handleModTableOwnerModalShowChange() {
      this.state.modTableOwnerModalShow = false
    },
    handleDropTableModalShowChange() {
      this.state.dropTableModalShow = false
    },
    onCreateTable() {
      this.router.push({
        path: '/dataManage/dataCatalog/createTable',
        query: {
          tab: window.$t('dataManage.createTable'),
          tabName: 'CreateTableTab',
          dsType: this.dsType,
          datasourceId: this.datasourceId,
          dsName: this.dsName,
          dbName: this.dbName,
          databaseId: this.databaseId
        }
      })
    }
  },
  render() {
    return (
      <>
        <NSpace vertical>
          <Card>
            <NSpace justify='space-between'>
              <NButton onClick={this.onCreateTable} type='info' size='small'>
                {window.$t('dataManage.createTable')}
              </NButton>
              <NSpace>
                <span style='line-height:28px'>
                  {this.dsType + '/' + this.dsName + '/' + this.dbName}
                </span>
                <NInput
                  v-model:value={this.state.searchParam.searchKey}
                  clearable
                  size='small'
                  placeholder={window.$t(
                    'dataManage.tableNameOrCommentOrRemark'
                  )}
                  style='width: 140px'
                />
                <NButton type='info' size='small' onClick={this.onUpdatedList}>
                  <NIcon>
                    <SearchOutlined />
                  </NIcon>
                </NButton>
              </NSpace>
            </NSpace>
          </Card>
          <Card>
            <NSpace vertical>
              <NDataTable
                row-class-name='items'
                columns={this.columnsRef.columns}
                size='small'
                data={this.state.list}
                loading={this.state.loading}
                scrollX={this.columnsRef.tableWidth}
              />
              <NSpace justify='end'>
                <NPagination
                  v-model:page={this.state.page}
                  v-model:page-size={this.state.limit}
                  item-count={this.state.count}
                  show-size-picker
                  page-sizes={[10, 30, 50]}
                  show-quick-jumper
                  on-update:page={this.changePage}
                  on-update:page-size={this.changePageSize}
                />
              </NSpace>
            </NSpace>
          </Card>
        </NSpace>
        <ModTableRemarkModal
          showModal={this.state.modTableRemarkModalShow}
          onModalShowChange={this.handleModTableRemarkModalShowChange}
          onRefreshList={this.onUpdatedList}
          datasourceId={this.datasourceId}
          dbName={this.dbName}
          tableName={this.state.currentRecord.tableName}
        ></ModTableRemarkModal>
        <ModTableOwnerModal
          showModal={this.state.modTableOwnerModalShow}
          onModalShowChange={this.handleModTableOwnerModalShowChange}
          onRefreshList={this.onUpdatedList}
          datasourceId={this.datasourceId}
          dbName={this.dbName}
          tableName={this.state.currentRecord.tableName}
        ></ModTableOwnerModal>
        <DropTableModal
          showModal={this.state.dropTableModalShow}
          onModalShowChange={this.handleDropTableModalShowChange}
          onRefreshList={this.onUpdatedList}
          datasourceId={this.datasourceId}
          dbName={this.dbName}
          tableName={this.state.currentRecord.tableName}
        ></DropTableModal>
      </>
    )
  }
})

export default TableListTab
